<template>
    <div class="box">
        <div class="wrap">
            <header>
                <h4>广州融创茂GO店</h4>
            </header>
            <main>
                <div class="left">
                    <p 
                    v-for="(val,index) in list" 
                    :key="val.title"
                    :class="{active : curIndex === index}"
                    @click="changeTab(index)"      
                    >
                        {{ val.title }}
                    </p>
                </div>
                <div class="right" ref="right" @scroll="scrollTop">
                    <div class="con" v-for="val in list" :key="val.title" ref="con">
                        <h3>{{ val.title }}</h3>
                        <dl v-for="item in val.list" :key="item.id">
                            <dt>
                                <img :src="item.img" alt="">
                            </dt>
                            <dd>
                                <p>{{ item.name }}</p>
                                <p class="text">{{ item.desc }}</p>
                                <p class="btn">
                                    <span>￥{{ item.price }}</span>
                                    <span class="size" @click="detail(item)">选规格<i v-if="item.count > 0" class="countNum">{{ item.count }}</i></span>
                                </p>
                            </dd>
                        </dl>
                    </div>
                </div>
            </main>
        </div>
        <transition name="fade">
            <MyDialog v-if="show" @close="show= false" />
        </transition>
        <div class="cart" v-if="cartList.length > 0">
            <p class="car">
                <span @click="showCart = true">
                    <i class="el-icon-goods">
                        <s class="count">{{ totalNum }}</s>
                    </i>
                </span>
                 <b>￥{{ totalPrice }}</b>
                <span class="num">结算</span>
            </p>
        </div>
        <div class="cartList" v-if="cartList.length > 0  && showCart" @click.self="showCart = false">
            <div class="cartcon">
                <p class="top">
                    <span>
                        <input type="checkbox" :checked="checked" @change="changeAll">
                        全选
                    </span>
                    <span @click="clear">
                        <i class="el-icon-delete"></i>
                        清空购物车
                    </span>
                </p>
                <dl v-for="item in cartList" :key="item.id">
                    <input type="checkbox" v-model="item.checked" @change="changeChecked(item)">
                    <dt>
                        <img :src="item.img" alt="">
                    </dt>
                    <dd>
                        <h4>{{ item.name }}</h4>
                        <p class="text">{{ item.desc }}</p>
                        <div class="btns">
                            <span>￥{{ item.price }}</span>
                            <p>
                                <span class="sub" @click="change(item,item.count - 1)">-</span>
                                <span>{{ item.count }}</span>
                                <span class="add" @click="change(item,item.count + 1)">+</span>
                            </p>
                        </div>
                    </dd>
                </dl>
                <p class="bottom">
                    <span>￥ {{ totalPrice }}</span>
                    <span> 总数：{{ totalNum }}</span>
                    <span class="num">结算</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
import MyDialog from '../../../components/MyDialog.vue'

export default {
    data(){
        return{
            curIndex : 0,    //初始下标
            conOffsetTop : [],   //存储所有con的高度
            show : false,   //详情弹窗是否显示
            showCart : false,   //购物车列表弹窗是否展示
            checked : true,   //默认全选选中
        }
    },
    components : {
        MyDialog
    },
    computed : {
        ...mapState(['list','cartList']),
        ...mapGetters(['totalNum','totalPrice'])
    },
    methods : {
        ...mapActions(['setlist']),
        ...mapMutations(['getDialog','changeCount','clear']),
        //tab切换
        changeTab(index){
            // this.curIndex = index;
            this.$refs.right.scrollTop = this.$refs.con[index].offsetTop 
        },
        //计算滚动距离
        scrollTop(){
            this.conOffsetTop.forEach((val,index) => {
                if(this.$refs.right.scrollTop + 2 > val){
                    this.curIndex = index
                }
            })
        },
        //点击选规格
        detail(item){
            this.show = true;
            this.getDialog(item)
        },
         //改变数量
        change(item,count){
            this.changeCount({
                item,
                count
            })
        },
        // 判断全选是否选中
        changeAll(){
            this.checked = !this.checked
            this.cartList.forEach(val => val.checked = this.checked);
        },
        changeChecked(){
            this.checked = this.cartList.every(val => val.checked);
        }
    },
    async mounted(){
        await this.setlist();
        //获取所有con的高度
        this.$nextTick(() => {
            this.$refs.con.forEach(val => {
                this.conOffsetTop.push(val.offsetTop)
            })
        })
    }
}
</script>

<style lang="scss" scoped>
    .wrap{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #eee;
    }
    header{
        line-height: 40px;
        background: #fff;
        padding: 10px ;
    }
    main{
        flex: 1;
        display: flex;
        margin-top: 10px;
        overflow: auto;
        position: relative;
    }
    .left{
        width: 100px;
        p{
            line-height: 45px;
            text-align: center;
        }
        .active{
            background: orange;
        }
    }
    .right{
        flex: 1;
        overflow: auto;
        scroll-behavior: smooth;
        h3{
            background: #ccc;
            margin-top: 10px;
        }
    }
    dl{
        display: flex;
        align-items: center;
        margin-top: 10px;
        dt{
            width: 100px;
            height: 100px;
        }
        dd{
            flex: 1;
            p{
                padding:  0 10px;
                margin-top: 10px;
            }
            .text{
                font-size: 16px;
            }
            .btn{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .size{
                display: inline-block;
                padding: 6px 14px;
                border-radius: 25px;
                background: chocolate;
                color: #fff;
                text-align: center;
                position: relative;
            }
            .countNum{
                position: absolute;
                top: -8px;
                right: -8px;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                background: red;
                color: #fff;
                text-align: center;
                line-height: 24px;
                font-style: normal;
                font-size: 18px;
            }
        }
    }
    .cart{
        position: fixed;
        width: 100%;
        bottom: 80px;
        left: 0;
        height: 70px;
        background: #ddd;
        padding: 10px 10px;
        .car{
            display: flex;
            justify-content: space-between;
        }
        i{
            display: inline-block;
            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
            border-radius: 50%;
            background: #fff;
            font-size: 36px;
            text-align: center;
            line-height: 80px;
            position: absolute;
            top: -20px;
            left: 10px;
            .count{
                display: inline-block;
                text-decoration: none;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: rgba(235, 110, 8, 0.945);
                color: #fff;
                text-align: center;
                line-height: 30px;
                position: absolute;
                top: -5px;
                right:  -5px;
                font-size: 16px;
            }
        }
    }
    .num{
        display: inline-block;
        width: 120px;
        height: 50px;
        background: rgb(216, 151, 12);
        color: #fff;
        text-align: center;
        line-height: 50px;
    }
    .cartList{
        position: fixed;
        width: 100%;
        height: 100%;
        bottom: 80px;
        left: 0;
        background: rgba($color: #000000, $alpha: .5);
    }
    .cartcon{
        min-height: 250px;
        position: absolute;
        bottom: 10px;
        right: 10px;
        left: 10px;
        border-radius: 10px;
        background: #fff;
        padding: 10px;
    }
    .top{
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
    }
    input{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        outline: none;
    }
    .btns {
        width: 100%;
        display: flex;
        align-items: center;
        span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            margin: 0 5px;
        }
    }
    .sub{
        border: 1px solid rgb(241, 157, 30);
        color: rgb(241, 157, 30);
    }
    .add{
        background: rgb(241, 157, 30);
        color: #fff;
    }
    .bottom{
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity 1.5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }

</style>